<template>
  <yd-layout style="background:#fff">
    <yd-navbar slot="navbar" title="注册" class="header" height="0.9rem" color="#fff">
      <router-link to="/" slot="left">
          <yd-navbar-back-icon color="#fff"></yd-navbar-back-icon>
          <span style="transform:scale(0.8);color:#fff;line-height:12px">首页</span>
      </router-link>
    </yd-navbar>

    <section>
      <yd-tab>
        <yd-tab-panel label="邮箱注册">
          <yd-cell-group>
            <yd-cell-item>
              <span slot="left">邮箱：</span>
              <yd-input slot="right" required v-model="email" 
                        placeholder="请输入正确邮箱" 
                        :show-error-icon="false" :show-success-icon="false"
              ></yd-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">密码：</span>
              <yd-input slot="right" type="password" required v-model="pwd1" 
                        placeholder="请输入密码" 
                        :show-error-icon="false" :show-success-icon="false"
              ></yd-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">确认密码：</span>
              <yd-input slot="right" type="password" required v-model="pwd2" 
                        placeholder="再次输入密码" 
                        :show-error-icon="false" :show-success-icon="false"
              ></yd-input>
            </yd-cell-item>
          </yd-cell-group>
        </yd-tab-panel>
        <yd-tab-panel label="手机注册">
          <yd-cell-group>
            <yd-cell-item>
              <yd-icon slot="icon" name="phone3" size=".45rem"></yd-icon>
              <input type="text" slot="right" v-model="phone" placeholder="请输入手机号码">
              <yd-sendcode slot="right" 
                          v-model="start" 
                          @click.native="sendCode" 
                          type="warning"
                          init-str="获取验证码"
              ></yd-sendcode>
            </yd-cell-item>
            <yd-cell-item>
              <yd-input slot="right" required v-model="yzm" 
                        placeholder="请输入收到的验证码" 
                        :show-error-icon="false" :show-success-icon="false"
              ></yd-input>
            </yd-cell-item>
          </yd-cell-group>
        </yd-tab-panel>
      </yd-tab>
      <yd-button-group>
        <yd-button size="large" :disabled="disabled" @click.native="register">注&nbsp;&nbsp;册</yd-button>
      </yd-button-group>
      <p style="margin:0.5rem 0.24rem 0;text-align:center;font-size:14px;color:#999">
        已有账号？<router-link to="/login" style="margin:0;color:#f00">去登录</router-link>
      </p>
    </section>
  </yd-layout>
</template>

<script>
export default {
  data(){
    return {
      email: '',
      phone: '',
      pwd1: '',
      pwd2: '',
      yzm: ''
    }
  },
  computed: {
    disabled(){
      return !(this.email && this.pwd1 && this.pwd2);
    }
  },
  methods: {
    register(){
      let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      let pwdReg = /^[^\s]{6,20}$/;
      if(!emailReg.test(this.email)){
        this.$dialog.toast({icon:'error',mes:'邮箱格式不正确',timeout: 1000});
        return;
      }
      if(!pwdReg.test(this.pwd1)){
        this.$dialog.toast({icon:'error',mes:'密码长度6-20位',timeout: 1000});
        return;
      }
      if(this.pwd1!=this.pwd2){
        this.$dialog.toast({icon:'error',mes:'密码不一致',timeout: 1000});
        return;
      }
      let config = {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }
      }
      this.$http.post('http://localhost:3000/user/register',{
        email: this.email,
        phone: this.phone,
        upwd: this.pwd1
      }).then(response=>{
        let { code, msg, uid, user } = response.body;
        if(code>0){
          sessionStorage.uid = uid;
          sessionStorage.user = user;
          this.$dialog.toast({
            icon: 'success',
            mes: msg,
            timeout: 1000,
            callback: ()=>{
              this.$router.push('/user')
            }
          })
        }else {
          this.$dialog.toast({
            icon: 'error',
            mes: msg,
            timeout: 1000
          })
        }
      })
    }
  }
}
</script>